.contanier {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #f1f5f9;
  position: relative;
  .topBar {
    position: relative;
    .rules {
      width: 50rpx;
      font-size: 20rpx;
      color: #ffffff;
      line-height: 24rpx;
      position: absolute;
      bottom: 20rpx;
      right: 32rpx;
      z-index: 999999999;
    }
  }
  .title-bar {
    background: linear-gradient(315deg, #f71e42 0%, #fa7646 100%);
  }
  .mt-scroll {
    height: calc(100vh - 176rpx);
  }
  .top-area {
    height: 388rpx;
    width: 100%;
    padding: 0 30rpx;
    background: linear-gradient(315deg, #f71e42 0%, #fa7646 100%);
    display: flex;
    justify-content: space-between;
    .left-bg {
      margin-top: 65rpx;
      width: 334rpx;
      height: 173rpx;
      background-image: url("https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/activityCenter/top-left-bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .bamboo-num {
        margin-top: 20rpx;
        font-size: 46rpx;
        color: #8e3608;
        font-weight: bold;
        margin-left: 46rpx;
      }
      .bamboo-view {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 186rpx;
        height: 40rpx;
        border-radius: 93rpx;
        border: 2rpx solid #8e3608;
        font-size: 22rpx;
        color: #8e3608;
        margin-left: 35rpx;
      }
      .gold-img {
        position: absolute;
        width: 102rpx;
        height: 102rpx;
        right: 13rpx;
        top: -51rpx;
        animation: moveUpDown 2s infinite;
      }
      @keyframes moveUpDown {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10rpx);
        }
        100% {
          transform: translateY(0);
        }
      }
    }
    .right-bg {
      margin-top: 65rpx;
      width: 334rpx;
      height: 173rpx;
      background-image: url("https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/activityCenter/top-right-bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .bamboo-num {
        margin-top: 20rpx;
        font-size: 40rpx;
        color: #d60a3d;
        font-weight: bold;
        margin-left: 46rpx;
      }
      .bamboo-view {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 215rpx;
        height: 40rpx;
        border-radius: 93rpx;
        border: 2rpx solid #d60a3d;
        font-size: 22rpx;
        color: #d60a3d;
        margin-left: 35rpx;
      }
      .gold-img {
        position: absolute;
        width: 102rpx;
        height: 102rpx;
        right: 13rpx;
        top: -51rpx;
        animation: moveUpDown 2s infinite;
      }
      @keyframes moveUpDown {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10rpx);
        }
        100% {
          transform: translateY(0);
        }
      }
    }
  }
  .sign-in {
    padding: 0 30rpx;
    position: absolute;
    top: 330rpx;
    width: 100%;
    .sign {
      width: 100%;
      background-color: #fff;
      padding: 34rpx 17rpx 39rpx 17rpx;
      border-radius: 10rpx;
      .sign-top {
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
        .right {
          display: flex;
          align-items: center;
          .notice {
            font-size: 24rpx;
            color: #999;
            margin-right: 20rpx;
          }
        }
      }
      .sign-content {
        margin-top: 26rpx;
        display: flex;
        justify-content: space-between;
        .sign-days {
          padding-top: 16rpx;
          width: 86rpx;
          height: 150rpx;
          border-radius: 6rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color: #fdf8e5;
          .gold {
            margin-top: 10rpx;
            width: 45rpx;
            height: 45rpx;
          }
        }
      }
      .sign-btn {
        margin-top: 22rpx;
        border-radius: 4rpx;
        width: 100%rpx;
        height: 72rpx;
        background-color: #fecd33;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #322c18;
        border: none;
      }
      .signed-btn {
        margin-top: 22rpx;
        border-radius: 4rpx;
        width: 100%rpx;
        height: 72rpx;
        background-color: #d8d8d8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #7c7c7c;
        border: none;
        &::after {
          display: none;
        }
      }
    }
  }
  .task {
    margin-top: 270rpx;
    .task-tabs {
      height: 95rpx;
      width: 100%;
      background-color: #f4f9ff;
      display: flex;
      justify-content: space-around;
      .tabs-item {
        width: 250rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #333;
      }
      .active {
        font-weight: 500;
        background-color: #fff;
      }
    }
    .task-content {
      background-color: #fff;
      padding: 30rpx;
      width: 100%;
      min-height: 200rpx;
      .empty-wrap {
        display: flex;
        flex-direction: column;
        padding: 60rpx 0 80rpx;
        align-items: center;
        .empty-img {
          width: 400rpx;
          height: 400rpx;
        }

        .tips {
          font-size: 30rpx;
          color: #999;
        }
      }
      .task-item {
        height: 130rpx;
        padding: 15rpx 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-title {
          display: flex;
          flex-direction: column;
          .title {
            display: flex;
            align-items: center;
            .gold-img {
              width: 26rpx;
              height: 26rpx;
            }
          }
          .tips {
            margin-top: 17rpx;
            font-size: 24rpx;
            color: #999;
          }
        }
        .item-btn {
          width: 150rpx;
          height: 62rpx;
          background: linear-gradient(270deg, #ff8484 0%, #fe5a59 100%);
          border-radius: 4rpx;
          color: #fff;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .sure-btn {
          width: 150rpx;
          height: 62rpx;
          background: #f4f4f4;
          border-radius: 4rpx;
          color: #999999;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .gift-store {
    margin-top: 42rpx;
    padding: 0 30rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .store-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .commodity {
      margin-top: 28rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        width: 333rpx;
        height: 377rpx;
        border-radius: 10rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        margin-bottom: 22rpx;
        .img {
          width: 333rpx;
          height: 244rpx;
          border-radius: 10rpx 10rpx 0rpx 0rpx;
        }
        .item-text {
          margin-left: 26rpx;
          margin-top: 22rpx;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}


.gray1{
  color: #999 !important;
}